>
<template>
  <view class="page">
    <u-navbar
      title=" "
      bgColor="transparent"
      :autoBack="true"
      :titleStyle="{ color: '#fff' }"
      leftIconSize="48rpx"
      leftIconColor="#fff"></u-navbar>

    <view class="page-ctx">
      <view class="success-wrap">
        <view class="pay-result" v-if="is_order_payed">
          <view class="icon-box flex-center">
            <image
              src="@/static/payment/result-done.png"
              mode="widthFix"></image>
          </view>
          <view class="text-box">
            <view class="text1">支付成功！</view>
            <view class="text2">感谢您的购买</view>
          </view>
        </view>

        <view class="pay-result pay-result-fail" v-else>
          <view class="icon-box flex-center">
            <image
              src="@/static/payment/result-fail.png"
              style="width: 100rpx; height: 100rpx"
              mode="widthFix"></image>
          </view>
          <view class="text-box">
            <view class="text1">支付失败！</view>
            <view class="text2">支付遇到问题~</view>
          </view>
        </view>
      </view>
      <view class="info-wrap">
        <view class="info-box">
          <view class="info-line" :class="{ fail: !is_order_payed }"></view>
          <view class="info-inner">
            <view class="info-bg"></view>
            <view class="price">
              <text class="huobi">￥</text>
              <text class="value">{{ info.pricePayed || "" }}</text>
            </view>
            <view class="info-items">
              <view class="info-item">
                <view class="label">订单编号：</view>
                <view class="text">
                  {{ info.orderNo || "" }}
                </view>
              </view>
              <view class="info-item">
                <view class="label">下单时间：</view>
                <view class="text">
                  {{ info.createdTime || "" }}
                </view>
              </view>
              <view class="info-item" v-if="is_order_payed">
                <view class="label">支付方式：</view>
                <view class="text">
                  <text v-if="payInfo.balance">
                    余额：￥{{ payInfo.balance }}
                  </text>
                  <text v-if="payInfo.applet">
                    微信支付：￥{{ payInfo.applet }}
                  </text>
                  <text v-if="payInfo.commission">
                    佣金支付：￥{{ payInfo.commission }}
                  </text>
                  <text v-if="payInfo.jifen">
                    积分抵现：￥{{ payInfo.jifen }}
                  </text>
                </view>
              </view>

              <view class="info-item" v-if="info.jifen">
                <view class="label">积分赠予：</view>
                <view class="text">{{ info.jifen || "0" }} 积分</view>
              </view>
            </view>
          </view>
        </view>
        <view class="btns flex-between">
          <view class="btn-detail fit-text" @click="toIndex()">返回商城</view>
          <view class="btn-detail fit-text" @click="toOrder()">订单详情</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: "order", //默认 order 普通订单   hotel - 酒店订房订单
      is_order_payed: true, //订单是否支付完成
      info: {},
      payInfo: {},
      id: "",
    };
  },
  computed: {},
  onLoad(option) {
    this.id = option.id || option.order_id;
    this.is_order_payed = option.is_pay == 1;
    this.type = option.type || "order";
    this.setView();
  },
  methods: {
    setView() {
      this.query_order();
    },
    // 普通商品订单
    query_order() {
      this.showLoading({
        title: "订单查询中",
        disClose: true,
      });
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          this.payInfo = this.info.payInfo;
        }

        this.hideLoading();
      });
    },

    //
    toOrder() {
      this.toRoute({
        path: "/order-detail",
        query: {
          id: this.id,
          from: "payment",
        },
        mode: "reLaunch",
      });
    },
    toIndex() {
      this.toReLaunchIndex();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.page {
}

.page-ctx {
}

.success-wrap {
  .pay-result {
    width: 100%;
    height: 484rpx;
    background: #f49c0d;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 160rpx;
    background: #f49c0d;

    &.pay-result-fail {
      background: #f49c0d;

      .icon-box {
        margin-right: 10rpx;
        width: 100rpx;
        height: 100rpx;

        image {
          width: 100rpx;
          height: 100rpx;
        }
      }

      .text-box {
        padding-left: 20rpx;
        padding-bottom: 0;
      }
    }
  }

  .icon-box {
    margin-right: 10rpx;
    width: 150rpx;
    height: 150rpx;

    image {
      width: 150rpx;
      height: 150rpx;
    }
  }

  .text-box {
    padding-bottom: 22rpx;

    .text1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 36rpx;
      color: #ffffff;
    }

    .text2 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}

.info-wrap {
  width: 710rpx;
  padding: 0 0;
  margin: 0 auto;
  position: relative;
  top: -120rpx;

  .info-box {
    width: 100%;

    .info-line {
      width: 710rpx;
      height: 24rpx;
      background: #1a581d;
      border-radius: 17rpx 17rpx 17rpx 17rpx;

      &.fail {
        background: #27a09a;
      }
    }

    .info-inner {
      position: relative;
      top: -12rpx;
      margin: 0 auto;
      width: 678rpx;
      // min-height: 445rpx;
      padding: 0 20rpx;
      background: #ffffff;
      box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(0, 55, 116, 0.1);
      border-radius: 0rpx 0rpx 20rpx 20rpx;

      .info-bg {
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        height: 56rpx;
        background: linear-gradient(
          180deg,
          rgba(50, 162, 56, 0.2) 0%,
          rgba(50, 162, 56, 0) 100%
        );
      }

      .price {
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
        text-align: center;
        padding: 32rpx 0;

        .huobi {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 48rpx;
          color: #000000;
        }

        .value {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 48rpx;
          color: #000000;
        }
      }

      .info-items {
        border-top: 1rpx dashed #eee;
        padding: 40rpx 0 60rpx 0;

        .info-item {
          display: flex;

          & + .info-item {
            margin-top: 40rpx;
          }

          .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #222222;
          }

          .text {
            flex: 1;
            overflow: hidden;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #7d7d7d;
            text {
              &:not(:first-child) {
                margin-left: 24rpx;
              }
            }
          }
        }
      }
    }
  }
}

.btns {
  margin-top: 150rpx;

  .btn-detail {
    width: 334rpx;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
  }
}
</style>
